<template>
  <div class="page-container padding-20 query-list-container">
    <div v-show="$route.name == 'equitySaleTotal'">
      <div class="search-container">
        <el-form :inline="true" ref="form" size="small">
          <el-date-picker
            v-model="rangeDate"
            size="small"
            type="daterange"
            align="right"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          ></el-date-picker>
          <el-button type="primary" @click="onSearch" size="small">查询</el-button>
          <el-button @click="onReset" size="small">重置</el-button>
        </el-form>
      </div>
      <el-table class="mt-20 el-table-modify" :data="tableData" border show-summary :summary-method="getSummaries">
        <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
        <el-table-column prop="date" align="center" label="日期"></el-table-column>
        <el-table-column prop="brandName" align="center" label="权益品牌"></el-table-column>
        <el-table-column prop="productName" align="center" label="产品名称"></el-table-column>
        <el-table-column prop="saleAmount" align="center" label="销售数量"></el-table-column>
        <el-table-column prop="expireAmount" align="center" label="已过期数量"></el-table-column>
        <el-table-column prop="renewAmount" align="center" label="续费数量"></el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="80">
          <template slot-scope="scope">
            <el-button size="mini" type="text" @click="linToDetaild(scope.row)">明细</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        ref="pagination"
        class="mt-20"
        background
        :page-size.sync="pageOption.pageSize"
        :total="pageOption.total"
        @size-change="onSizeChange"
        @current-change="onPageChange"
        layout="slot,->,prev,pager,next,sizes,jumper"
      >
        <span class="pagination-title">
          共 {{ pageOption.total }} 条记录 第 {{ pageOption.page }} /
          {{ pageOption.pageTotal }} 页
        </span>
      </el-pagination>
    </div>

    <router-view v-if="$route.name !== 'equitySaleTotal'"></router-view>
  </div>
</template>

<script>
import { privilegeProductSaleCount } from "@/api/report";
import { momentFormatStr, pickerOptions } from "@/utils/const";
import moment from "moment";

export default {
  name: "equitySaleTotal",
  data() {
    this.pickerOptions = pickerOptions;
    return {
      rangeDate: [new Date(), new Date()],
      tableData: [],
      pageOption: {
        page: 1,
        pageSize: 20,
        total: 0,
        pageTotal: 1
      },
      allData: [],
    };
  },
  methods: {
    onSearch() {
      this.pageOption.page = 1;
      this.requestData();
    },
    onReset() {
      this.pageOption.page = 1;
      this.rangeDate = [new Date(), new Date()];
      this.requestData();
    },
    async requestData() {
      const { page, pageSize: size } = this.pageOption;
      // let params = { page: page - 1, size };
      let params = {};
      if (this.rangeDate[0]) {
        params.start = moment(this.rangeDate[0]).format(momentFormatStr.date);
        params.end = moment(this.rangeDate[1]).format(momentFormatStr.date);
      }
      const { data } = await privilegeProductSaleCount(params);
      this.allData = data;
      this.tableData = data.slice( (page - 1) * size, size);
      // this.pageOption.total = total;
      // this.pageOption.pageTotal = total ? Math.ceil(total / size) : 1;

      this.pageOption.total = data.length;
      this.pageOption.pageTotal = data.length ? Math.ceil(data.length / size) : 1;

      if (this.$refs.pagination) {
        let childrenRefs = this.$refs.pagination.$children;
        this.$nextTick(() => {
          childrenRefs.forEach(child => child.$forceUpdate());
        });
      }
    },
    onSizeChange(size) {
      const {page} = this.pageOption;
      this.pageOption.pageSize = size;
      // this.requestData();
      this.pageOption.pageTotal = this.allData.length ? Math.ceil(this.allData.length / size) : 1;
      this.tableData = this.allData.slice((page - 1) * size, size);
    },
    onPageChange(page) {
      this.pageOption.page = page;
      // this.requestData();
      this.tableData = this.allData.slice((page - 1) * this.pageOption.pageSize, page * this.pageOption.pageSize);
    },
    linToDetaild(row) {
      this.$router.push({ name: "equitySaleDetailed", param: { id: row.id } });
    },
    getSummaries(param) {
        const { columns } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '总价';
            return;
          }
          const values = this.allData.map(item => Number(item[column.property]));
          if (!values.every(value => isNaN(value))) {
            sums[index] = values.reduce((prev, curr) => {
              const value = Number(curr);
              if (!isNaN(value)) {
                return prev + curr;
              } else {
                return prev;
              }
            }, 0);
          } else {
            sums[index] = '';
          }
        });

        return sums;
      }
  },
  created() {
    this.requestData();
  }
};
</script>

<style lang="scss">
</style>